<template>
  <m-page>
    <!-- 用途资料上传 -->
    <m-header title="用途资料上传"></m-header>
    <div class="dataUpload">
      <div class="upload_header">
        <ynet-cell-item title="旅游" no-border>
          <span slot="left">申请用途</span>
        </ynet-cell-item>
        <div class="tips">
          <p>请上传您的用途资料，如：购销合同、银行卡刷卡单据、商户电子账单或其他相关资料。</p>
        </div>
      </div>
      <!-- 上传以下用途资料 -->
      <div class="upload_data">
        <ynet-cell-item title="上传以下用途资料" no-border>
          <span slot="left" class="holder"></span>
        </ynet-cell-item>
        <div class="upload_item">
          <!-- 购销合同上传 -->
          <div class="upload_agreement">
            <div class="uploadbox" @click="showImage('1')" v-if="imageList.img1.length == 0">
              <ynet-icon name="camera" size="lg"></ynet-icon>
            </div>
            <div class="uploadbox" v-if="imageList.img1.length != 0">
              <img :src="imageList.img1" alt />
              <ynet-tag
                class="image-reader-item-del"
                size="small"
                shape="quarter"
                fill-color="#111A34"
                type="fill"
                font-color="#fff"
                @click.native="onDeleteImage('1')"
              >
                <ynet-icon name="close"></ynet-icon>
              </ynet-tag>
            </div>
            <p class="text">购销合同</p>
          </div>
          <!-- 银行卡刷单单据上传 -->
          <div class="upload_agreement">
            <div class="uploadbox" @click="showImage('2')" v-if="imageList.img2.length == 0">
              <ynet-icon name="camera" size="lg"></ynet-icon>
            </div>
            <div class="uploadbox" v-if="imageList.img2.length != 0">
              <img :src="imageList.img2" alt />
              <ynet-tag
                class="image-reader-item-del"
                size="small"
                shape="quarter"
                fill-color="#111A34"
                type="fill"
                font-color="#fff"
                @click.native="onDeleteImage('2')"
              >
                <ynet-icon name="close"></ynet-icon>
              </ynet-tag>
            </div>
            <p class="text">银行卡刷单单据</p>
          </div>
          <!-- 商户电子账单上传 -->
          <div class="upload_agreement">
            <div class="uploadbox" @click="showImage('3')" v-if="imageList.img3.length == 0">
              <ynet-icon name="camera" size="lg"></ynet-icon>
            </div>
            <div class="uploadbox" v-if="imageList.img3.length != 0">
              <img :src="imageList.img3" alt />
              <ynet-tag
                class="image-reader-item-del"
                size="small"
                shape="quarter"
                fill-color="#111A34"
                type="fill"
                font-color="#fff"
                @click.native="onDeleteImage('3')"
              >
                <ynet-icon name="close"></ynet-icon>
              </ynet-tag>
            </div>
            <p class="text">商户电子账单</p>
          </div>
        </div>
      </div>
      <div class="emptybox"></div>
      <!-- 上传其她用途资料 -->
      <div class="upload_data">
        <ynet-cell-item title="上传其它用途资料" no-border>
          <span slot="left" class="holder"></span>
        </ynet-cell-item>
        <div class="upload_agreement">
          <div class="uploadbox" @click="showImage('4')" v-if="imageList.img4.length == 0">
            <ynet-icon name="camera" size="lg"></ynet-icon>
          </div>
          <div class="uploadbox" v-if="imageList.img4.length != 0">
            <img :src="imageList.img4" alt />
            <ynet-tag
              class="image-reader-item-del"
              size="small"
              shape="quarter"
              fill-color="#111A34"
              type="fill"
              font-color="#fff"
              @click.native="onDeleteImage('4')"
            >
              <ynet-icon name="close"></ynet-icon>
            </ynet-tag>
          </div>
          <p class="text">其它资料</p>
        </div>
      </div>
      <ynet-button type="warning" @click="submit">提交</ynet-button>
    </div>
  </m-page>
</template>

<script>
import { Icon, CellItem, Tag ,Button} from "ynet-mobile";
import { goto } from "../utils/index"
export default {
  components: {
    [CellItem.name]: CellItem,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Button.name]:Button
  },
  data() {
    return {
      imageList: {
        //上传的图片地址
        img1: "", //购销合同
        img2: "", //银行卡账单单据
        img3: "", //商户电子账单
        img4: "" //其它资料
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 点击调用打开相册/拍照界面的api接口 选择图片
    showImage(id) {
      app.api.showCameraImagePicker().then(res => {
        console.log(res);
        if (id == "1") {
          this.imageList.img1 = res.imgBase64Data;
        } else if (id == "2") {
          this.imageList.img2 = res.imgBase64Data;
        } else if (id == "3") {
          this.imageList.img3 = res.imgBase64Data;
        } else if (id == "4") {
          this.imageList.img4 = res.imgBase64Data;
        }
      });
    },
    //点击移出图片预览图
    onDeleteImage(id) {
      if (id == "1") {
        this.imageList.img1 = "";
      } else if (id == "2") {
        this.imageList.img2 = "";
      } else if (id == "3") {
        this.imageList.img3 = "";
      } else if (id == "4") {
        this.imageList.img4 = "";
      }
    },
    // 提交按钮
    // 点击提交资料
    // 提交成功 则进入申请确认页
    submit(){
      goto('apply_checked.html')
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

